<template>
  <el-card v-if="editShopDialog" shadow="hover">
    <el-dialog v-model="editShopDialog" title="商机跟进记录" width="1100">
      <el-table
        v-loading="listLoading"
        :data="list"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          label="跟进ID"
          prop="TrackID"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="跟进人"
          prop="StaffName"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          align="center"
          label="跟进时间"
          prop="TrackTime"
          show-overflow-tooltip
          width="180"
        />
        <el-table-column align="center" label="跟进方式" width="120">
          <template #default="{ row }">
            <span v-if="row.TrackType === 1">电话</span>
            <span v-if="row.TrackType === 2">上门</span>
            <span v-if="row.TrackType === 3">客户到公司</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="成熟度"
          prop="TrackLevel"
          show-overflow-tooltip
          width="180"
        />
        <el-table-column
          align="left"
          label="跟进内容"
          prop="TrackMemo"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="下次跟进时间"
          prop="NextTrackTime"
          show-overflow-tooltip
        />
        <!-- <el-table-column align="center" label="操作" width="200">
        <template #default="{ row }">
          <el-button text @click="handleEdit(row)">修改</el-button>
          <el-button text @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column> -->
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="OrderRow.TrackClass"
            type="primary"
            @click="addTrackRecord"
          >
            新增服务小记
          </el-button>
          <el-button
            v-if="OrderRow.TrackClass == 0"
            type="primary"
            @click="addTrackRecord"
          >
            新增跟进小记
          </el-button>
          <el-button @click="editShopDialog = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
  <service-edit ref="serviceEditRef" @fetch-data="fetchData" />
  <track-edit ref="trackEditRef" @fetch-data="fetchData" />
</template>

<script>
  import { getList } from '@/api/customerTrackingTracklist'
  import ServiceEdit from '@/views/business/components/ServiceEdit'
  import TrackEdit from '@/views/business/components/CustomerTrackingTracklistEdit'

  export default defineComponent({
    name: 'TrackRecord',
    components: { ServiceEdit, TrackEdit },
    emits: ['fetch-data'],
    setup() {
      const state = reactive({
        editRef: null,
        serviceEditRef: null,
        trackEditRef: null,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          CustomerPickID: 0,
          OrderID: 0,
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
        OrderID: 0,
        shopLinkForm: {},
        StoreList: [],
        title: '',
        editShopDialog: false,
        OrderRow: {},
      })

      const handleEdit = (row) => {
        state.OrderRow = row
        if (row.TrackClass.length > 1) {
          state.OrderRow.TrackClass = 1
        } else {
          state.OrderRow.TrackClass = 0
        }
        console.log('shopLinkForm', state.OrderRow.TrackClass, row)
        state.queryForm = Object.assign(
          {
            CustomerPickID: 0,
            OrderID: 0,
            pageNo: 1,
            pageSize: 10,
            title: '',
          },
          row
        )
        console.log(state.queryForm, 'state.queryForm ')
        fetchData()
        state.editShopDialog = true
      }

      // const showList = (OrderInfo, list) => {
      //   state.OrderID = OrderInfo.OrderID
      //   state.OrderFlowState = Math.abs(OrderInfo.OrderFlowState)
      //   state.StoreList = list
      // }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }

      const addTrackRecord = () => {
        if (state.OrderRow.TrackClass) {
          state.serviceEditRef.showEdit(state.OrderRow)
        } else {
          state.trackEditRef.showEdit(state.OrderRow)
        }
      }

      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getList(state.queryForm)
        state.list = list
        state.total = total
        state.listLoading = false
      }

      const setSelectRows = (val) => {
        state.selectRows = val
      }
      return {
        ...toRefs(state),
        setSelectRows,
        handleEdit,
        fetchData,
        handleCurrentChange,
        handleSizeChange,
        addTrackRecord,
      }
    },
  })
</script>
